<template>
  <div id="demo">
    <strong class="warning"></strong>
    <div class="buttons"></div>
    <div class="screens"></div>
  </div>
</template>

<script>
import MultiScreen from './MuiltScreen'
export default {
  data () {
    return {}
  },
  mounted () {
    // this.open()
    // this.test()
    // this.listeners()
    /* eslint-disable no-new */
    new MultiScreen()
  },
  methods: {
    open () {
      window.open(
        'https://www.baidu.com/',
        '_blank',
        'width=400, height=300, left=100, top=100'
      )
    },
    async test () {
      if ('getScreens' in window) {
        // 支持
        console.log('支持')
      }
      const screens = await window.getScreens()
      console.log('screens: ', screens)

      // 判断是否接入多个屏
      var isMulti = await isMultiScreen()
      console.log('是否接入多个屏', isMulti)
      const permission = await navigator.permissions.query({
        name: 'window-placement'
      })
      console.log(permission)
    },
    listeners () {
      window.addEventListener('screenschange', () => {
        alert('123')
      })
    }
  }
}
</script>

<style scoped>
#demo {
  width: 600px;
}
#demo .warning {
  font-size: 14px;
  color: #f00;
}
#demo .buttons input[type='button'] {
  height: 40px;
  font-size: 15px;
  margin-right: 20px;
  color: #fff;
  background: #389e88;
  border: 0;
  border-radius: 5px;
}
#demo .buttons input[type='button']:active {
  background: rgb(10, 233, 10);
}
#demo .screens {
  margin-top: 10px;
}
#demo .screens dl {
  background: #ccc;
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
  padding: 10px;
}
#demo .screens dt {
  font-size: 16px;
  font-weight: bold;
  color: #1d3bd2;
  margin-bottom: 10px;
}
#demo .screens dd {
  padding: 0;
  margin: 0;
}
</style>
